<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
        >
          <Form-item label="商家名称" prop="bName">
            <Input
              type="text"
              v-model="searchForm.bName"
              placeholder="请输入名称"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="联系方式" prop="bContact">
            <Input
              type="text"
              v-model="searchForm.bContact"
              placeholder="请输入联系方式"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="消费类型" prop="bConsumeType">
            <Select
              v-model="searchForm.bConsumeType"
              placeholder="请选择"
              clearable
              style="width: 160px"
            >
              <Option value="">全部</Option>
              <Option
                v-for="(item, i) in XFLXList"
                :key="i"
                :value="item.id"
                :label="item.dictName"
              ></Option>
            </Select>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>

      <Table
        :loading="loading"
        border
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50, 100]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!-- 商家消费详情 -->
    <Modal v-model="detailFlag" title="商家消费详情">
      <div class="detailTitle">
        <div>商家名称：{{ detailObj.bname }}</div>
        <div>商家联系方式：{{ detailObj.bcontact }}</div>
        <div>账号余额：{{ detailObj.baccountbalance }}</div>
      </div>
      <div>
        <Table
          :loading="loadingDetail"
          border
          :columns="columnsDetail"
          class="mt_10"
          :data="dataDetail"
          ref="tableDetail"
        ></Table>
        <Row type="flex" justify="end" class="mt_10">
          <Page
            :current="pageNumber"
            :total="totalDetail"
            :page-size="pageSize"
            @on-change="changePageDetail"
            @on-page-size-change="changePageSizeDetail"
            :page-size-opts="[10, 20, 50, 100]"
            size="small"
            show-total
            show-elevator
            show-sizer
          ></Page>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import { getDictByCode } from "@/api/dict.js";
import { getBusiness, getBusinessByPage } from "@/api/recharge.js";
import ossManage from "@/views/sys/oss-manage/ossManage";

export default {
  name: "recharge",
  components: {
    region,
    ossManage,
  },
  data() {
    return {
      loading: true, // 表单加载状态
      loadingDetail: true, //详情表单加载状态
      detailFlag: false, //详情窗口展示
      detailObj: {},
      XFLXList: [], //消费类型下拉选数据
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        username: "",
        mobile: "",
        disabled: "OPEN",
      },
      columns: [
        {
          title: "商家名称",
          key: "bname",
          tooltip: true,
        },
        {
          title: "商家联系方式",
          key: "bcontact",
        },
        {
          title: "最后一次消费时间",
          width: 200,
          key: "blastconsumeTime",
        },

        {
          title: "消费类型",
          align: "left",
          key: "dictName",
        },
        {
          title: "账号余额",
          align: "left",
          key: "baccountbalance",
        },
        {
          title: "推广号",
          align: "left",
          key: "bextensionNo",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  justifyContent: "center",
                },
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      display: this.selectedMember ? "none" : "block",
                    },
                    on: {
                      click: () => {
                        this.detail(params.row);
                      },
                    },
                  },
                  "查看"
                ),
              ]
            );
          },
        },
      ],
      columnsDetail: [
        {
          title: "消费时间",
          key: "blastconsumeTime",
        },

        {
          title: "消费类型",
          align: "left",
          key: "dictName",
        },
        {
          title: "消费金额",
          key: "consumptionAmount",
        },
      ],
      data: [], // 表单数据
      dataDetail: [], //商家详情数据
      pageSize: 10,
      pageNumber: 1,
      totalDetail: 0, // 表单数据总数
      total: 0, // 表单数据总数
      selectMember: [], //保存选中的用户
    };
  },
  props: {
    // 是否为选中模式
    selectedMember: {
      type: Boolean,
      default: false,
    },
    // 已选择用户数据
    selectedList: {
      type: null,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    selectedList: {
      handler(val) {
        this.$set(this, "selectMember", JSON.parse(JSON.stringify(val)));
        this.init(this.data);
        // 将父级数据与当前组件数据进行匹配
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 初始化信息
    init(data) {
      data.forEach((item) => {
        if (this.selectMember.length != 0) {
          this.selectMember.forEach((member) => {
            if (member.id == item.id) {
              this.$set(item, "___selected", true);
            }
          });
        } else {
          this.$set(item, "___selected", false);
        }
      });
      this.data = data;
    },
    getDict() {
      getDictByCode("XFLX").then((res) => {
        if (res.result) {
          this.XFLXList = res.result;
        }
      });
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.searchForm.pageNumber = 1;
      this.getData();
    },
    // 商家详情分页 改变页码
    changePageDetail(v) {
      this.pageNumber = v;
      this.getDataDetail();
    },
    // 商家详情分页 改变页数
    changePageSizeDetail(v) {
      this.pageSize = v;
      this.pageNumber = 1;
      this.getDataDetail();
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
    //查询商家列表
    getData() {
      getBusiness(this.searchForm).then((res) => {
        if (res.result.records) {
          this.loading = false;
          this.init(res.result.records);
          this.total = res.result.total;
        }
      });
    },
    //查询商家详情列表dkdkd
    getDataDetail() {
      console.log(this.detailObj);
      getBusinessByPage({ bId: this.detailObj.bid }).then((res) => {
        if (res.result.records) {
          this.loadingDetail = false;
          this.dataDetail = res.result.records;
          this.totalDetail = res.result.total;
        }
      });
    },
    //查看会员
    detail(row) {
      this.detailFlag = true;
      this.detailObj = row;
      this.getDataDetail();
      // this.$router.push({ name: "member-detail", query: { id: row.id } });
    },
  },
  mounted() {
    this.getDict();
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  width: 100%;
}
/deep/ .ivu-card {
  width: 100%;
}
.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.detailTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
